<template>
  <!-- 主页面右侧编辑组件 -->
  <!-- 动态实现，通过左侧点击组件，根据其标识动态加载编辑组件内容 -->
  <div class="vy-theme-left">
    <template v-if="viewFlag">
      <component :is="leftView"></component>
    </template>
    <template v-else>
      <div class="not-support-mode">
        暂不支持该模式
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "vy-theme-left",
  props: ["flag"],
  data() {
    return {
      viewFlag: null, // 临时视图标识
      leftView: null // 组件视图组件
    };
  },
  created() {
    this.getViewFlag();
  },
  mounted() {
    // 初始化挂载时，执行动态组件加载逻辑
    this.$nextTick(() => {
      this.loadComponent();
    });
  },
  methods: {
    getViewFlag() {
      let _mode = this.$route.query.mode;
      if (!_mode) {
        // 兼容从缓存取项目模式
        _mode = sessionStorage.getItem("proType") || "";
      }
      switch (String(_mode)) {
        case "1":
          // 打卡模式
          this.viewFlag = "mode_clock";
          break;
        case "2":
          // 面授模式
          this.viewFlag = "mode_face";
          break;
        case "3":
          // 闯关模式
          this.viewFlag = "mode_barrier";
          break;
      }
    },
    loadComponent() {
      if (!this.viewFlag) {
        return;
      }
      // 读取自定义组件
      const requireComponents = require.context("./left", false, /\.vue/);
      requireComponents.keys().forEach(fileName => {
        // 获取组件名称
        var reqComName = fileName.substring(
          fileName.lastIndexOf("/") + 1,
          fileName.lastIndexOf(".")
        );
        if (reqComName == this.viewFlag) {
          const reqCom = requireComponents(fileName);
          this.leftView = reqCom.default; // 设置动态组件实例
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.vy-theme-left {
  width: 100%;
  height: 100%;
  background: #ffffff;
  position: relative;
  overflow: auto;
  .not-support-mode {
    position: relative;
    width: 50%;
    height: 100px;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}
</style>
